<template>
  <div>
    <el-form
      label-width="120px"
      class="demo-ruleForm"
      style="margin-top: 20px"
      :model="formData"
      ref="formData"
      :rules="rules"
    >
      <el-row
        type="flex"
        justify="flex-start"
        :gutter="0"
        style="margin-top: -10px"
      >
        <el-col :span="24">
          <el-form-item label="冲销原因：" prop="writeOffReason">
            <el-input
              v-model="formData.writeOffReason"
              type="textarea"
              placeholder="请输入冲销原因"
              style="margin-top: 10px; border-radius: 4px"
              maxlength="1000"
              :rows="4"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="centert" :gutter="0">
        <el-col :span="12">
          <el-form-item label="填报单位：" prop="reportInOrgName">
            <el-select
              v-model="formData.reportInOrgName"
              placeholder="请选择填报单位"
              @change="changeReportInOrgId"
              style="width: 100%"
            >
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="冲销单编号：" prop="writeOffCode">
            <el-input v-model="formData.writeOffCode" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- --------------- -->
      <el-row type="flex" :gutter="0">
        <el-col :span="12">
          <el-form-item label="部门：" prop="bumen">
            <el-select
              v-model="formData.reportInOrgName"
              placeholder="请选择部门"
              @change="changeReportInOrgId"
              style="width: 100%"
            >
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="业务类型：" prop="bumen">
            <el-input
              v-model="formData.writeOffName"
              placeholder="请输入业务类型"
              maxlength="300"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="0">
        <el-col :span="12">
          <el-form-item label="项目名称：" prop="bumen">
            <el-input
              v-model="formData.writeOffName"
              placeholder="请输入项目名称"
              maxlength="300"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="核算组织：" prop="bumen">
            <el-select
              v-model="formData.reportInOrgName"
              placeholder="请选择核算组织"
              @change="changeReportInOrgId"
              style="width: 100%"
            >
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- ----------------- -->
      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="冲销单名称：" prop="writeOffName">
            <el-input
              v-model="formData.writeOffName"
              placeholder="请输入冲销单名称"
              maxlength="300"
              show-word-limit
              @blur="handleTrim('writeOffName')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="本位币：" prop="writeOffName">
            <el-input
              v-model="formData.writeOffName"
              placeholder="请输入本位币："
              maxlength="300"
              show-word-limit
              @blur="handleTrim('writeOffName')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12" class="relative">
          <el-form-item label="发票单编号：" prop="invoiceCode">
            <el-input
              v-model="formData.invoiceCode"
              placeholder="请选择发票单编号"
              disabled
            ></el-input>
            <el-button
              plain
              type="single-number"
              size="mini"
              class="chereay"
              @click="showDialog"
              >选择</el-button
            >
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="供应商：" prop="partyBName">
            <el-input v-model="formData.partyBName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="2">
        <el-col :span="12">
          <el-form-item label="结算单编号：" prop="settlementCode">
            <el-input v-model="formData.settlementCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="结算单名称：" prop="settlementName">
            <el-input v-model="formData.settlementName" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="分类名称：" prop="categoryName">
            <el-input v-model="formData.categoryName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="币种：" prop="currency">
            <el-input v-model="formData.currency" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center" :gutter="0">
        <el-col :span="12">
          <el-form-item label="结算金额：" prop="settlementAmount">
            <el-input v-model="formData.settlementAmount" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" :offset="4">
          <el-form-item label="本次冲销金额：" prop="writeOffAmount">
            <el-input v-model="formData.writeOffAmount" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="flex-start" :gutter="0">
        <el-col :span="12">
          <el-form-item label="已收票金额：" prop="totalInvoiceAmount">
            <el-input v-model="formData.totalInvoiceAmount" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="发票张数：" prop="invoiceNum">
            <el-input v-model="formData.invoiceNum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="flex-start" :gutter="0">
        <el-col :span="12">
          <el-form-item label="编制人：" prop="compileUser">
            <el-input v-model="formData.compileUser" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item label="编制日期：" prop="compileDate">
            <el-date-picker
              v-model="formData.compileDate"
              type="date"
              style="width: 100%"
              placeholder="请选择"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="flex-start" :gutter="0">
        <el-col :span="24">
          <el-form-item label="备注：" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              style="height: 100px; margin-top: 10px; border-radius: 4px"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <chooseInvoice
      ref="chooseInvoice"
      @getBasic="getBasic"
      :reportInOrgId="formData.reportInOrgId"
      :invoiceCode="this.formData.invoiceCode"
    />
  </div>
</template>

<script>
import chooseInvoice from "../components/chooseInvoice";
import { getUserInfo, getReportInOrgData } from "@/basa/api";
import { addUrlPerFix } from "@/basa/utils";
import { getInvoceBasicById } from "../api";
import { formatNumber } from "../../../../basa/utils";
export default {
  props: {
    invoiceWriteOffBO: Object,
  },
  data() {
    return {
      formData: {
        writeOffReason: "", //冲销原因
        reportInOrgName: "", //填报单位
        writeOffCode: "", //冲销单编号
        writeOffName: "", //冲销单名称
        partyBName: "", //供应商
        invoiceCode: "", //发票单编号
        settlementCode: "", //结算单编号
        settlementName: "", //结算单名称
        categoryName: "", //分类名称
        currency: "", //币种
        settlementAmount: "", //结算金额
        totalInvoiceAmount: "", //已收票金额
        writeOffAmount: "", //本次冲销金额
        invoiceNum: "", //发票张数
        compileUser: "", //编制人
        compileDate: new Date(), //编制日期
        remark: "", //备注
        reportInOrgId: 0,
        invoiceBasicId: "",
      },
      showPop: false,
      rules: {
        writeOffReason: [
          {
            required: true,
            message: "请输入冲销原因",
            trigger: "blur",
          },
        ],
        writeOffName: [
          {
            required: true,
            message: "请输入冲销单名称",
            trigger: "blur",
          },
        ],
        invoiceCode: [
          {
            required: true,
            message: "请输入发票单编号",
            trigger: "blur",
          },
        ],
        settlementCode: [
          {
            required: true,
            message: "请输入结算单编号",
            trigger: "blur",
          },
        ],
        writeOffAmount: [
          {
            required: true,
            message: "请输入本次冲销金额",
            trigger: "blur",
          },
        ],
      },
      reportOptions: [], // 填报单位
      reportInOrgObj: {
        title: "填报单位查询",
        tableData: [],
        recordsTotal: 0,
        formDate: {
          mainType: "A",
          orgid: "",
          pageNo: 1,
          pageSize: 20,
        },
      },
    };
  },
  methods: {
    showDialog() {
      if (this.formData.reportInOrgId && this.formData.reportInOrgId != "") {
        this.$refs["chooseInvoice"].dialogTableVisibletextarea = true;
        this.$refs["chooseInvoice"].listConSupPage();
      } else {
        this.$showErrorMessage("请先选择填报单位");
      }
    },
    getBasic(val) {
      console.log(val);
      //   this.formData = val;

      //    this.formDate.writeOffReason=this.formDate.writeOffReason, //冲销原因
      //   (this.formData.reportInOrgName = val.reportInOrgName), //填报单位
      //     //    this.formData.writeOffCode=this.formData., //冲销单编号
      //     //    this.formData.writeOffName=this.formData.writeOffName, //冲销单名称
      //     (this.formData.partyBName = val.partyBName), //供应商
      //     (this.formData.invoiceCode = val.invoiceCode), //发票单编号
      //     (this.formData.settlementCode = val.settlementCode), //结算单编号
      //     (this.formData.settlementName = val.settlementName), //结算单名称
      //     (this.formData.categoryName = val.categoryName), //分类名称
      //     (this.formData.currency = val.currency), //币种
      //     (this.formData.settlementAmount = Number(val.settlementAmount).toFixed(2)), //结算金额
      //     (this.formData.totalInvoiceAmount = Number(val.totalInvoiceAmount).toFixed(2)), //已收票金额
      //     (this.formData.writeOffAmount = Number(val.currentInvoiceAmount).toFixed(2)), //本次冲销金额
      //     (this.formData.invoiceNum = formatNumber(val.invoiceNum,3)), //发票张数
      //     (this.formData.compileUser = val.compileUser), //编制人
      //     (this.formData.compileDate = new Date()), //编制日期
      //     (this.formData.remark = val.remark), //备注
      //     (this.formData.reportInOrgId = this.formData.reportInOrgId);

      this.formData.writeOffAmount = Number(val.currentInvoiceAmount).toFixed(
        2
      );
      this.formData.invoiceBasicId = val.id;
      getInvoceBasicById({ id: val.id }).then((res) => {
        // this.formData = res.data.data.invoceBasic

        //    this.formDate.writeOffReason=this.formDate.writeOffReason, //冲销原因
        (this.formData.reportInOrgName = val.reportInOrgName), //填报单位
          (this.formData.writeOffCode = res.data.data.invoceBasic.writeOffCode), //冲销单编号
          //    this.formData.writeOffName=this.formData.writeOffName, //冲销单名称
          (this.formData.partyBName = res.data.data.invoceBasic.partyBName), //供应商
          (this.formData.invoiceCode = res.data.data.invoceBasic.invoiceCode), //发票单编号
          (this.formData.settlementCode =
            res.data.data.invoceBasic.settlementCode), //结算单编号
          (this.formData.settlementName =
            res.data.data.invoceBasic.settlementName), //结算单名称
          (this.formData.categoryName = res.data.data.invoceBasic.categoryName), //分类名称
          (this.formData.currency = res.data.data.invoceBasic.currency), //币种
          (this.formData.settlementAmount = Number(
            res.data.data.invoceBasic.settlementAmount
          ).toFixed(2)), //结算金额
          (this.formData.totalInvoiceAmount = Number(
            res.data.data.invoceBasic.totalInvoiceAmount
          ).toFixed(2)), //已收票金额
          (this.formData.writeOffAmount = Number(
            res.data.data.invoceBasic.currentInvoiceAmount
          ).toFixed(2)), //本次冲销金额
          (this.formData.invoiceNum = formatNumber(
            res.data.data.invoceBasic.invoiceNum,
            0
          )), //发票张数
          (this.formData.compileUser = res.data.data.invoceBasic.compileUser), //编制人
          (this.formData.compileDate = new Date()), //编制日期
          (this.formData.remark = res.data.data.invoceBasic.remark), //备注
          (this.formData.reportInOrgId = this.formData.reportInOrgId);
        // this.$emit("getTableList", res.data.data)
        let invoceBillData = res.data.data.invoceBill;
        invoceBillData.forEach((v) => {
          v.currentNum = formatNumber(v.currentNum, 3);
          v.unitPriceWithoutTax = Number(v.unitPriceWithoutTax).toFixed(2);
          v.price = Number(v.price).toFixed(2);
          v.rate = new this.$BigNumber(Number(v.rate)).multipliedBy(100) + "%";
          v.amountExcludeTax = Number(v.amountExcludeTax).toFixed(2);
          v.tax = Number(v.tax).toFixed(2);
          v.amount = Number(v.amount).toFixed(2);
        });
        let invoceInfoData = res.data.data.invoceInfo;
        invoceInfoData.forEach((v) => {
          v.priceTaxTotal = Number(v.priceTaxTotal).toFixed(2);
          v.rate = new this.$BigNumber(Number(v.rate)).multipliedBy(100) + "%";
          v.tax = Number(v.tax).toFixed(2);
          v.amountExcludeTax = Number(v.amountExcludeTax).toFixed(2);
          if (v.invoiceDate) {
            v.invoiceDate = v.invoiceDate.substring(0, 10);
          }
        });
        console.log("invoceInfoData", invoceInfoData);
        console.log("invoceBillData", invoceBillData);

        this.$bus.$emit("getTableList", invoceBillData);
        this.$bus.$emit("getTableListInfo", invoceInfoData);
        this.$bus.$emit("getTableListAttch", []);
      });
    },
    getUserInfo() {
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then((res) => {
        this.formData.compileUser = res.data.data.userInfo.name;
        this.formData.compileUserId = res.data.data.userInfo.id;
        this.formData.reportUsername = res.data.data.userInfo.name;
        // this.reportOptions=res.data.data[openId]
        this.userOpenId = res.data.data.userInfo.openId;
        this.getReportInOrgData(res.data.data.userInfo.openId);
      });
    },
    // 填报信息
    getReportInOrgData(openId) {
      getReportInOrgData({ openIds: [openId] }).then((res) => {
        this.reportInOrgObj.tableData = res.data.data[openId];
        console.log(this.reportInOrgObj.tableData);
        this.reportInOrgObj.recordsTotal = res.data.data[openId].length;
        this.reportOptions = res.data.data[openId];
        this.formData.reportInOrgName =
          this.formData.reportInOrgName || this.reportOptions[0].name;
        this.formData.reportInOrgId =
          this.formData.reportInOrgId || this.reportOptions[0].orgId;
      });
    },
    // 填报单位
    changeReportInOrgId(val) {
      const tempObj = this.reportOptions.find((e) => e.name === val);
      this.formData.reportInOrgId = tempObj.orgId;
      this.formData.reportInOrgName = tempObj.name;
      console.log(this.formData.reportInOrgName);

      this.formData.settlementName = "";
      this.formData.writeOffCode = "";
      this.formData.partyBName = "";
      this.formData.settlementCode = "";
      this.formData.categoryName = "";
      this.formData.currency = "";
      this.formData.totalInvoiceAmount = "";
      this.formData.invoiceNum = "";
      this.formData.invoiceCode = "";
      this.formData.writeOffAmount = "";
      this.formData.remark = "";
      this.formData.settlementAmount = "";
      this.tableData = [];
      this.$emit("updataList", this.tableData);
      this.$nextTick(() => {
        this.$refs.formData.clearValidate();
      });
    },
    handleTrim(str) {
      this.formData[str] = this.formData[str].trim();
      // this.form[str] = this.form[str].replace(/(^\s*)|(\s*)$/g, "");
    },
  },
  mounted() {
    this.getUserInfo();
  },
  watch: {
    invoiceWriteOffBO: {
      handler(val) {
        this.formData = val;
        this.formData.totalInvoiceAmount = Number(
          this.formData.totalInvoiceAmount
        ).toFixed(2);
        this.formData.writeOffAmount = Number(
          this.formData.writeOffAmount
        ).toFixed(2);
        this.formData.settlementAmount = Number(
          this.formData.settlementAmount
        ).toFixed(2);
        this.formData.invoiceNum = formatNumber(this.formData.invoiceNum, 0);
      },
    },
    "formData.reportInOrgName": {
      handler(n) {
        if (n) {
          const tempObj = this.reportOptions.find((e) => e.name === n);
          if (tempObj) {
            this.formData.reportInOrgId = tempObj.orgId;
            this.formData.reportInOrgName = tempObj.name;
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  components: {
    chooseInvoice,
  },
  activated() {
    this.formData = {
      //   writeOffReason: "", //冲销原因
      reportInOrgName: "", //填报单位
      writeOffCode: "", //冲销单编号
      //   writeOffName: "", //冲销单名称
      partyBName: "", //供应商
      invoiceCode: "", //发票单编号
      settlementCode: "", //结算单编号
      settlementName: "", //结算单名称
      categoryName: "", //分类名称
      currency: "", //币种
      settlementAmount: "", //结算金额
      totalInvoiceAmount: "", //已收票金额
      writeOffAmount: "", //本次冲销金额
      invoiceNum: "", //发票张数
      compileDate: new Date(), //编制日期
      remark: "", //备注
      reportInOrgId: 0,
    };
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped>
// 基本信息样式
.relative {
  position: relative;
  .chereay {
    margin-left: 10px;
    position: absolute;
  }
}
.demo-ruleForm {
  width: 80%;
  margin: 20px 0 0 50px;
}
::v-deep {
  .el-input input {
    padding-right: 50px;
  }
}
</style>
